<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
*{
    box-sizing: border-box;
}
.header,.footer{
    background-color: grey;
    color: white;
    padding: 15px;
}
.column{
    float: left;
    padding: 15px;
}
.clerafix::after{
    content: "";
    clear: both;
    display: table;
}
.menu{
    width: 25%;
}
.content{
    width: 75%;
}
.menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menuu li{
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover{
    background-color:#0099cc;
}
</style>
</head>
<body>
    <div class="header">
    <h1>Shanghai</h1>
</div>
      
    <div class="clearfix">
    <div class="column menu">
<ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
</ul>
</div>
      
    <div class="column content">
    <h1>The City</h1>
    <p>Shanghai is one of the four direct-administered
    municipalities of the People's Republic of China. Welcome to Shanghai!</p>
    <p>You will learn more about web layout and responsive 
    web pages in a later chapter.</p>
</div>
</div>s
      
    <div class="footer">
    <p>Footer Text</p>
</div>
</body>
</html>